<template>
	<div class="dashSet-page">
		<el-card class="box-card mb10" shadow="never">
			<el-form ref="searchFormRef" class="search-form" :inline="true" label-position="left" label-width="80px" :model="searchForm">
				<el-row :gutter="30" justify="start">
					<el-col :span="6">
						<el-form-item class="form-item" label="组件名称:" prop="fullName">
							<el-input v-model="searchForm.fullName" placeholder="请输入可视化组件名称" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="组件标识:" prop="boardCode">
							<el-input v-model="searchForm.boardCode" placeholder="请输入可视化组件标识" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="看板类型:" prop="boardType">
							<dict-select v-model="searchForm.boardType" :dictKey="'chart_board_type'" placeholder="请选择看板类型" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="组件状态:" prop="status">
							<el-select v-model="searchForm.status" class="el-form-item" clearable placeholder="请选择状态">
								<el-option label="启用" :value="1" />
								<el-option label="停用" :value="0" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24" style="text-align: right">
						<div class="search-btn mr5">
							<el-button type="primary" @click="handleSearch">查询</el-button>
							<el-button @click="handleReset">重置</el-button>
							<el-button v-has="'system:dashSet:config'" type="primary" @click="handleDashSetting">看板设置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<div v-loading="loading">
			<el-row :gutter="16">
				<el-col :span="6" v-has="'system:dashSet:add'">
					<div class="btn-hover" @click="handleAdd">
						<el-icon style="margin-right: 10px"><ele-Plus /></el-icon>
						新增可视化组件
					</div>
				</el-col>
				<el-col :span="6" v-for="data in tableData" :key="data.id">
					<el-card class="list-card mb10" shadow="never">
						<div class="card-main-title mb10">{{ data.fullName }}</div>
						<div class="img-box">
							<el-image style="width: 100%; height: 260px" :src="previewUrl + data.imgUrl" :preview-src-list="[previewUrl + data.imgUrl]" fit="contain" />
						</div>
						<el-divider />
						<div class="btn-link">
							<span class="card-main-dot" :class="data.status == 1 ? 'success' : 'danger'">{{ data.status == 1 ? '启用' : '禁用' }}</span>
							<span>
								<el-button v-has="'system:dashSet:update'" @click="handleUpdate(data)" link>编辑</el-button>
								<el-button v-has="'system:dashSet:delete'" @click="handleDelete(data)" link>删除</el-button>
							</span>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<EditDashBoradModal ref="editModalRef" @peak-modal-ok="handleModalOk" />
	</div>
</template>
<script setup>
import global from '@/utils/global'
import useTableList from '@/hooks/useTableList'
import useModal from '@/hooks/useModal'
import EditDashBoradModal from './leafPages/EditDashBoradModal.vue'

/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-11-06 14:34:32
 */
const router = useRouter()
const state = reactive({
	searchForm: {
		fullName: null,
		boardCode: null,
		boardType: null,
		status: null,
		pageSize: 1000,
	},
	searchFormRef: null,
	previewUrl: import.meta.env.VITE_IMAGE_PREVIEW,
})
const { searchForm, searchFormRef, previewUrl } = toRefs(state)

const queryUrl = '/meta-system/web/v1/chartBoard/pageList'
const { loading, handleInitQuery, handleModalOk, tableData } = useTableList(queryUrl, state.searchForm)

const { editModalRef, handleAdd, handleUpdate } = useModal()

/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-11-06 14:36:09
 */
const handleSearch = () => {
	handleInitQuery()
}
const handleReset = () => {
	state.searchFormRef.resetFields()
	handleInitQuery()
}
const handleDelete = row => {
	global.$baseConfirm(
		`是否确认删除名称为"--【${row.fullName}】--"的数据?`,
		'提示',
		() => {
			global.$fetchPostData(`/meta-system/web/v1/chartBoard/del/${row.id}`, {}).then(data => {
				if (data.code == 200) {
					global.$baseMessage(data.msg, 'success')
					handleModalOk(2)
				} else {
					global.$baseMessage(data.msg, 'error')
				}
			})
		},
		() => {}
	)
}
const handleDashSetting = () => {
	router.push({
		path: '/system/dashSet/config',
	})
}
</script>
<style lang="scss" scoped>
:deep() {
	.el-divider--horizontal {
		margin: 10px 0px;
	}
}
.btn-hover {
	width: 100%;
	height: 368px;
	border: 1px dashed #dcdfe6;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #303133;
	cursor: pointer;
	&:hover {
		border: 1px dashed #0052cc;
	}
}
.btn-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
